<template>
  <div class="main">
    <NavBar :title="'EQ调节'" @leftClick="leftClick" />
    <!-- <h2>EQ调节</h2> -->
    <div class="headTile">
      <commonPage />
      <!-- echars盒子 -->
      <div
        class="echart"
        id="mychart"
        :style="{
          float: 'left',
          background: '#FFF',
        }"
      ></div>
      <!-- 设置echars区域 -->
      <div class="setEchars">
        <!-- 点击修改头部 -->
        <van-row type="flex" class="rowTow">
          <span :class="['ic_updata']" @click="hanlderUpdataOne(1)"></span>
          <span :class="['ic_updata']" @click="hanlderUpdataOne(2)"></span>
          <span :class="['ic_updata']" @click="hanlderUpdataOne(3)"></span>
          <span :class="['ic_updata']" @click="hanlderUpdataOne(4)"></span>
        </van-row>
        <!-- 内容显示中间区域 -->
        <van-row class="rowOne" type="flex" justify="space-between">
          <van-col span="4">
            <span class="eq"> EQ </span>
            <span class="frequency"> 频率 </span>
            <span class="qval"> Q值 </span>
            <span class="gain"> 增益 </span>
            <span class="fDecember"> -12dB </span>
            <span class="zero"> 0dB </span>
            <span class="zDecember"> +12dB </span>
          </van-col>
          <!-- 轮播 -->
          <van-col span="19">
            <van-swipe :loop="false">
              <!-- 一到四例 -->
              <van-swipe-item>
                <van-col span="4">
                  <span
                    :class="[item.class]"
                    v-for="(item, index) in colone"
                    :key="index"
                  >
                    {{ item.val }}
                  </span>
                  <div class="vanSlider">
                    <van-slider
                      v-model="value"
                      @change="onChangeOriginalcol"
                      bar-height="6px"
                      :max="0"
                      :min="-40"
                      active-color="#ebedf0"
                      vertical
                      style="height: 220px"
                      button-size="16px"
                    />
                  </div>
                </van-col>
                <van-col span="4">
                  <span
                    :class="[item.class]"
                    v-for="(item, index) in colTow"
                    :key="index"
                  >
                    {{ item.val }}
                  </span>
                  <div class="vanSlider">
                    <van-slider
                      v-model="value"
                      @change="onChangeOriginalcol"
                      bar-height="6px"
                      :max="0"
                      :min="-40"
                      active-color="#ebedf0"
                      vertical
                      style="height: 220px"
                      button-size="16px"
                    />
                  </div>
                </van-col>
                <van-col span="4">
                  <span
                    :class="[item.class]"
                    v-for="(item, index) in colTherr"
                    :key="index"
                  >
                    {{ item.val }}
                  </span>
                  <div class="vanSlider">
                    <van-slider
                      v-model="value"
                      @change="onChangeOriginalcol"
                      bar-height="6px"
                      :max="0"
                      :min="-40"
                      active-color="#ebedf0"
                      vertical
                      style="height: 220px"
                      button-size="16px"
                    />
                  </div>
                </van-col>
                <van-col span="4">
                  <span
                    :class="[item.class]"
                    v-for="(item, index) in colFore"
                    :key="index"
                  >
                    {{ item.val }}
                  </span>
                  <div class="vanSlider">
                    <van-slider
                      v-model="value"
                      @change="onChangeOriginalcol"
                      bar-height="6px"
                      :max="0"
                      :min="-40"
                      active-color="#ebedf0"
                      vertical
                      style="height: 220px"
                      button-size="16px"
                    />
                  </div> </van-col
              ></van-swipe-item>
              <!-- 五到八例 -->
              <van-swipe-item>
                <van-col span="4">
                  <span
                    :class="[item.class]"
                    v-for="(item, index) in colFive"
                    :key="index"
                  >
                    {{ item.val }}
                  </span>
                  <div class="vanSlider">
                    <van-slider
                      v-model="value"
                      @change="onChangeOriginalcol"
                      bar-height="6px"
                      :max="0"
                      :min="-40"
                      active-color="#ebedf0"
                      vertical
                      style="height: 220px"
                      button-size="16px"
                    />
                  </div>
                </van-col>
                <van-col span="4">
                  <span
                    :class="[item.class]"
                    v-for="(item, index) in colsix"
                    :key="index"
                  >
                    {{ item.val }}
                  </span>
                  <div class="vanSlider">
                    <van-slider
                      v-model="value"
                      @change="onChangeOriginalcol"
                      bar-height="6px"
                      :max="0"
                      :min="-40"
                      active-color="#ebedf0"
                      vertical
                      style="height: 220px"
                      button-size="16px"
                    />
                  </div>
                </van-col>
                <van-col span="4">
                  <span
                    :class="[item.class]"
                    v-for="(item, index) in colseven"
                    :key="index"
                  >
                    {{ item.val }}
                  </span>
                  <div class="vanSlider">
                    <van-slider
                      v-model="value"
                      @change="onChangeOriginalcol"
                      bar-height="6px"
                      :max="0"
                      :min="-40"
                      active-color="#ebedf0"
                      vertical
                      style="height: 220px"
                      button-size="16px"
                    />
                  </div>
                </van-col>
                <van-col span="4">
                  <span
                    :class="[item.class]"
                    v-for="(item, index) in coleight"
                    :key="index"
                  >
                    {{ item.val }}
                  </span>
                  <div class="vanSlider">
                    <van-slider
                      v-model="value"
                      @change="onChangeOriginalcol"
                      bar-height="6px"
                      :max="0"
                      :min="-40"
                      active-color="#ebedf0"
                      vertical
                      style="height: 220px"
                      button-size="16px"
                    />
                  </div>
                </van-col>
              </van-swipe-item>
              <!-- 九到十二例 -->
              <van-swipe-item>
                <van-col span="4">
                  <span
                    :class="[item.class]"
                    v-for="(item, index) in colnine"
                    :key="index"
                  >
                    {{ item.val }}
                  </span>
                  <div class="vanSlider">
                    <van-slider
                      v-model="value"
                      @change="onChangeOriginalcol"
                      bar-height="6px"
                      :max="0"
                      :min="-40"
                      active-color="#ebedf0"
                      vertical
                      style="height: 220px"
                      button-size="16px"
                    />
                  </div>
                </van-col>
                <van-col span="4">
                  <span
                    :class="[item.class]"
                    v-for="(item, index) in colzero"
                    :key="index"
                  >
                    {{ item.val }}
                  </span>
                  <div class="vanSlider">
                    <van-slider
                      v-model="value"
                      @change="onChangeOriginalcol"
                      bar-height="6px"
                      :max="0"
                      :min="-40"
                      active-color="#ebedf0"
                      vertical
                      style="height: 220px"
                      button-size="16px"
                    />
                  </div>
                </van-col>
                <van-col span="4">
                  <span
                    :class="[item.class]"
                    v-for="(item, index) in coleleven"
                    :key="index"
                  >
                    {{ item.val }}
                  </span>
                  <div class="vanSlider">
                    <van-slider
                      v-model="value"
                      @change="onChangeOriginalcol"
                      bar-height="6px"
                      :max="0"
                      :min="-40"
                      active-color="#ebedf0"
                      vertical
                      style="height: 220px"
                      button-size="16px"
                    />
                  </div>
                </van-col>
                <van-col span="4">
                  <span
                    :class="[item.class]"
                    v-for="(item, index) in coltwelve"
                    :key="index"
                  >
                    {{ item.val }}
                  </span>
                  <div class="vanSlider">
                    <van-slider
                      v-model="value"
                      @change="onChangeOriginalcol"
                      bar-height="6px"
                      :max="0"
                      :min="-40"
                      active-color="#ebedf0"
                      vertical
                      style="height: 220px"
                      button-size="16px"
                    />
                  </div>
                </van-col>
              </van-swipe-item>
              <!-- 十三到十六 -->
              <van-swipe-item>
                <van-col span="4">
                  <span
                    :class="[item.class]"
                    v-for="(item, index) in colthirteen"
                    :key="index"
                  >
                    {{ item.val }}
                  </span>
                  <div class="vanSlider">
                    <van-slider
                      v-model="value"
                      @change="onChangeOriginalcol"
                      bar-height="6px"
                      :max="0"
                      :min="-40"
                      active-color="#ebedf0"
                      vertical
                      style="height: 220px"
                      button-size="16px"
                    />
                  </div>
                </van-col>
                <van-col span="4">
                  <span
                    :class="[item.class]"
                    v-for="(item, index) in colfourteen"
                    :key="index"
                  >
                    {{ item.val }}
                  </span>
                  <div class="vanSlider">
                    <van-slider
                      v-model="value"
                      @change="onChangeOriginalcol"
                      bar-height="6px"
                      :max="0"
                      :min="-40"
                      active-color="#ebedf0"
                      vertical
                      style="height: 220px"
                      button-size="16px"
                    />
                  </div>
                </van-col>
                <van-col span="4">
                  <span
                    :class="[item.class]"
                    v-for="(item, index) in colfifteen"
                    :key="index"
                  >
                    {{ item.val }}
                  </span>
                  <div class="vanSlider">
                    <van-slider
                      v-model="value"
                      @change="onChangeOriginalcol"
                      bar-height="6px"
                      :max="0"
                      :min="-40"
                      active-color="#ebedf0"
                      vertical
                      style="height: 220px"
                      button-size="16px"
                    />
                  </div>
                </van-col>
                <van-col span="4">
                  <span
                    :class="[item.class]"
                    v-for="(item, index) in colsixteen"
                    :key="index"
                  >
                    {{ item.val }}
                  </span>
                  <div class="vanSlider">
                    <van-slider
                      v-model="value"
                      @change="onChangeOriginalcol"
                      bar-height="6px"
                      :max="0"
                      :min="-40"
                      active-color="#ebedf0"
                      vertical
                      style="height: 220px"
                      button-size="16px"
                    />
                  </div>
                </van-col>
              </van-swipe-item>
            </van-swipe>
          </van-col>
        </van-row>
        <!-- 恢复默认 -->
        <van-row type="flex" justify="center">
          <button class="button" @click="handlerDefault">恢复默认</button>
        </van-row>
      </div>
      <!-- <chart ref="chart1" ></chart> -->
    </div>
    <!-- 弹框组件 -->
    <div class="moveMainBox" v-if="showMoveMainBox">
      <div class="mengchen"></div>
      <div class="moveMain">
        <div class="moveTitle">EQ设置</div>
        <div class="moveMeddle">
          <span>Q值设置</span>
          <span>{{ valueSet }}</span>
        </div>
        <div class="valueSetVal">
          <span
            :class="[
              ic_voice_some ? 'ic_voice_some_active' : 'ic_voice_some',
              'ic_pat',
            ]"
            @touchstart="handlerIconSomeSetVal"
            @touchend="handlerIconAddSetVal"
          ></span>
          <van-slider
            v-model="valueSet"
            @change="onChangeOriginalcol"
            bar-height="6px"
            :max="40"
            :min="0"
            active-color="#ebedf0"
            style="width: 216px"
            button-size="16px"
          />
          <span
            :class="[
              ic_voice_add ? 'ic_voice_add_active' : 'ic_voice_add',
              'ic_pat',
            ]"
            @touchstart="handlericvoiceadd"
            @touchend="handlericvoiceaddIconAdd"
          ></span>
        </div>
        <!-- 中间线 -->
        <div class="valueLine"></div>
        <!-- 频率设置 -->
        <div
          class="moveMeddlepl"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;

            height: 66px;
          "
        >
          <div class="toppl">频率设置</div>
          <!-- <span>{{ valueSetFrequency  }}</span> -->
          <div class="topHz">
            <van-field v-model="textFileld" @input="handlertextFileldVal" />
            <div class="Hz">Hz</div>
          </div>
        </div>
        <div class="valueSetVal">
          <span
            :class="[
              Fileldsome ? 'ic_voice_some_active' : 'ic_voice_some',
              'ic_pat',
            ]"
            @touchstart="handlerIconfrequencySetVal"
            @touchend="handlerIconAddfrequencytVal"
          ></span>
          <van-slider
            v-model="valueSetFrequency"
            @change="onChangeOriginalcol"
            bar-height="6px"
            :max="0"
            :min="-40"
            active-color="#ebedf0"
            style="width: 216px"
            button-size="16px"
          />
          <span
            :class="[
              Fileldadd ? 'ic_voice_add_active' : 'ic_voice_add',
              'ic_pat',
            ]"
            @touchstart="handlericvoiceaddfrequency"
            @touchend="handlericvoiceaddIconAddfrequency"
          ></span>
        </div>
        <div class="moveFoot">
          <span class="moveFootText" @click="handlerlater">取消</span>
          <span class="moveFootLine"></span>
          <span class="moveFootText" @click="handleranew">确定</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "../../components/NavBar.vue";
import commonPage from "../../components/commonPage.vue";
import sliderCard from "../../components/sliderCard.vue";
import * as echarts from "echarts";
export default {
  components: {
    NavBar,
    commonPage,
    sliderCard,
  },
  data() {
    return {
      maxNum: 12,
      minNum: -12,
      xData: [20, 2.24, 4.46, 6.68, 8.9, 11.12, 11.34, 12.56, 17.78, 20], //横坐标数据
      // yData: [30, 132, 80, 134], //纵坐标数据，与横坐标对应
      // targetData: [12, 9, 6, 3, 0, -3, -6, -9, -12], // 需要传入的值
      targetData: [9, -5, 8, 9, -9, -7, 8, -5, 6, 0], // Y轴需要显示的值
      valueSet: 0,
      valueSetFrequency: 0,
      textFileld: 0,
      showMoveMainBox: false,
      ic_voice_some: false,
      ic_voice_add: false,
      Fileldsome: false,
      Fileldadd: false,
      value: 0,
      orgOptions: {},
      colone: [
        {
          class: "eq",
          val: "1",
        },
        {
          class: "frequency",
          val: "25Hz",
        },
        {
          class: "qval",
          val: "20",
        },
        {
          class: "gain",
          val: "0dB",
        },
      ],
      colTow: [
        {
          class: "eq",
          val: "2",
        },
        {
          class: "frequency",
          val: "25Hz",
        },
        {
          class: "qval",
          val: "20",
        },
        {
          class: "gain",
          val: "0dB",
        },
      ],
      colTherr: [
        {
          class: "eq",
          val: "3",
        },
        {
          class: "frequency",
          val: "40Hz",
        },
        {
          class: "qval",
          val: "20",
        },
        {
          class: "gain",
          val: "0dB",
        },
      ],
      colFore: [
        {
          class: "eq",
          val: "4",
        },
        {
          class: "frequency",
          val: "63Hz",
        },
        {
          class: "qval",
          val: "20",
        },
        {
          class: "gain",
          val: "0dB",
        },
      ],
      colFive: [
        {
          class: "eq",
          val: "5",
        },
        {
          class: "frequency",
          val: "63Hz",
        },
        {
          class: "qval",
          val: "20",
        },
        {
          class: "gain",
          val: "0dB",
        },
      ],
      colsix: [
        {
          class: "eq",
          val: "6",
        },
        {
          class: "frequency",
          val: "63Hz",
        },
        {
          class: "qval",
          val: "20",
        },
        {
          class: "gain",
          val: "0dB",
        },
      ],
      colseven: [
        {
          class: "eq",
          val: "7",
        },
        {
          class: "frequency",
          val: "63Hz",
        },
        {
          class: "qval",
          val: "20",
        },
        {
          class: "gain",
          val: "0dB",
        },
      ],
      coleight: [
        {
          class: "eq",
          val: "8",
        },
        {
          class: "frequency",
          val: "63Hz",
        },
        {
          class: "qval",
          val: "20",
        },
        {
          class: "gain",
          val: "0dB",
        },
      ],
      colnine: [
        {
          class: "eq",
          val: "9",
        },
        {
          class: "frequency",
          val: "63Hz",
        },
        {
          class: "qval",
          val: "20",
        },
        {
          class: "gain",
          val: "0dB",
        },
      ],
      colzero: [
        {
          class: "eq",
          val: "10",
        },
        {
          class: "frequency",
          val: "63Hz",
        },
        {
          class: "qval",
          val: "20",
        },
        {
          class: "gain",
          val: "0dB",
        },
      ],
      coleleven: [
        {
          class: "eq",
          val: "11",
        },
        {
          class: "frequency",
          val: "63Hz",
        },
        {
          class: "qval",
          val: "20",
        },
        {
          class: "gain",
          val: "0dB",
        },
      ],
      coltwelve: [
        {
          class: "eq",
          val: "12",
        },
        {
          class: "frequency",
          val: "63Hz",
        },
        {
          class: "qval",
          val: "20",
        },
        {
          class: "gain",
          val: "0dB",
        },
      ],
      colthirteen: [
        {
          class: "eq",
          val: "13",
        },
        {
          class: "frequency",
          val: "63Hz",
        },
        {
          class: "qval",
          val: "20",
        },
        {
          class: "gain",
          val: "0dB",
        },
      ],
      colfourteen: [
        {
          class: "eq",
          val: "14",
        },
        {
          class: "frequency",
          val: "63Hz",
        },
        {
          class: "qval",
          val: "20",
        },
        {
          class: "gain",
          val: "0dB",
        },
      ],
      colfifteen: [
        {
          class: "eq",
          val: "15",
        },
        {
          class: "frequency",
          val: "63Hz",
        },
        {
          class: "qval",
          val: "20",
        },
        {
          class: "gain",
          val: "0dB",
        },
      ],
      colsixteen: [
        {
          class: "eq",
          val: "16",
        },
        {
          class: "frequency",
          val: "63Hz",
        },
        {
          class: "qval",
          val: "20",
        },
        {
          class: "gain",
          val: "0dB",
        },
      ],
    };
  },
  // created() {
  //   window.hilink && hilink.setTitleVisible(false);
  // },

  mounted() {
    console.log(this.$echarts);
    this.initEcharts();
    window.hilink && window.hilink.setTitleVisible(false);
  },
  beforeDestroy() {
    window.hilink && window.hilink.setTitleVisible(true);
  },
  methods: {
    leftClick() {
      this.$router.push("/");
    },
    onChangeOriginalcol(val) {
      console.log(val);
    },
    hanlderUpdataOne(id) {
      this.showMoveMainBox = true;
      console.log(id);
    },
    handlerlater() {
      console.log("000");
      this.showMoveMainBox = false;
    },
    handleranew() {
      this.setBleSatuts(1);
    },
    handlerIconSomeSetVal() {
      this.ic_voice_some = true;
      this.valueSet--;
    },
    handlerIconAddSetVal() {
      this.ic_voice_some = false;
    },
    handlericvoiceadd() {
      this.ic_voice_add = true;
      this.valueSet++;
    },
    handlericvoiceaddIconAdd() {
      this.ic_voice_add = false;
    },
    handlerIconfrequencySetVal() {
      this.valueSetFrequency--;
      this.Fileldsome = true;
      this.textFileld = this.valueSetFrequency;
    },
    handlerIconAddfrequencytVal() {
      this.Fileldsome = false;
    },
    handlericvoiceaddfrequency() {
      this.valueSetFrequency++;
      this.Fileldadd = true;
      this.textFileld = this.valueSetFrequency;
    },
    handlericvoiceaddIconAddfrequency() {
      this.Fileldadd = false;
    },
    handlertextFileldVal(val) {
      console.log(typeof val);
      this.valueSetFrequency = Number(val);
    },
    //恢复默认事件
    handlerDefault() {
      console.log("恢复默认");
    },

    //处理targetData与图表中series[0].data对应
    //处理targetData与图表中series[0].data对应
    setData(arr) {
      arr = arr.map((item) => {
        if (item >= 0) return (item = this.maxNum - item + item * 2);
        return (item = this.maxNum + item);
      });
      //   console.log(arr);
      return arr;
    },
    // yAxis --Y轴的数据处理
    formatYData(value, index) {
      let indexList = [];
      let texts = [];
      let count = 0;
      for (let i = 0; i < index + 1; i++) {
        indexList.push(i);
        count = index;
      }
      if (count === 0) {
        texts.push(this.minNum);
      } else if ((count = count++)) {
        texts.push(this.minNum + count * 3);
        // console.log(texts);
      }
      texts.forEach((item, index) => {
        if (item === 0) {
          //   console.log(index);
          texts[index] = `${texts[index]}dB`;
        }
      });
      return texts;
    },
    initEcharts() {
      let _this = this;

      const option = {
        layoutCenter: ["100%", "10%"], //位置
        layoutSize: "65%", //大小
        grid: {
          // 图表与div间上下左右留白
          x: 20,
          y: 20,
          x2: 0,
          y2: 0,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: _this.xData,
          axisLine: {
            show: false, //这里的show用于设置是否显示x轴那一条线 默认为true
          },
          axisTick: {
            show: false, // 是否显示坐标轴刻度
            type: "dashed",
          },
          axisLabel: {
            show: true, // 是否显示刻度标签
            interval: 0,
          },
        },
        yAxis: {
          min: 0,
          max: 24,
          interval: 3,
          type: "value",
          // nameGap: 15,     // 坐标轴名称与轴线之间的距离
          nameLocation: "start", // 坐标轴名称显示位置。('start''middle''center''end')
          position: "right",
          axisLabel: {
            formatter: _this.formatYData,
          },
        },
        series: [
          {
            data: _this.setData(_this.targetData),
            type: "line",
            smooth: true, // true圆弧  false 直线
            symbol: "none", //控制各个节点处是否有节点标记
            markLine: {
              symbol: "none", // 去掉警戒线最后面的箭头
              type: "line",
              data: [
                { type: "max", name: "最大值" }, // 设置平均线 可以有多个yAxis,多条’示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
                { type: "min", name: "最小值" },
                // { xAxis: '20',type: 'max'}
              ],

              lineStyle: {
                type: "dashed",
                color: "gray",
              },
              label: {
                show: false, //是否显示标签。
              },
            },
            grid: {
              left: "8%",
              right: "8%",
              bottom: "1%",
              containLabel: true,
            },
            areaStyle: {
              // 区域填充样式
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(58,132,255, 0.9)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(58,132,255, 0.1)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("mychart"), null, {
        width: 320,
        height: 173,
      }); // 图标初始化
      myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      // myChart.resize({
      //   width: 340,
      //   height: 240,
      // });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/style/Eqsytle.less";
.echart {
  border-radius: 16px;
  width: 334px;
  height: 186px;
  background: #fff;
  // box-sizing: content-box;
  box-sizing: border-box;
  margin: 0 12px;
  margin-top: 32px;
  margin-bottom: 12px;
}
.main {
  position: relative;
  background: var(--bg);
  .headTile {
    overflow: hidden;

    .chartBox {
      display: flex;
      align-items: center;
      justify-content: center;

      // width: 336px;
      // height: 186px;
      background: var(--box_bg);
      opacity: 1;
      border-radius: 16px;
      margin: auto;
      margin-top: 32px;
      #main {
        canvas {
          width: 1200px;
          height: 900px;
        }
      }
    }
    .setEchars {
      width: 336px;
      height: 578px;
      background: var(--box_bg);
      opacity: 1;
      border-radius: 16px;
      margin: auto;
      margin-top: 12px;
      margin-bottom: 12px;
      overflow: hidden;
      .rowTow {
        position: absolute;
        margin-top: 24px;
        margin-left: 90px;
        span {
          margin-right: 40px;
          &:nth-last-child(1) {
            margin-right: 0px;
          }
        }
      }
      .rowOne {
        margin-top: 72px;
        .van-col--4 {
          width: 64px;
          height: 424px;
          // margin-top: 72px;
          // background-color: red;
          .vanSlider {
            display: flex;
            justify-content: center;
            height: 232px;
            margin-top: 30px;
            .van-slider--vertical {
              // transform: rotate(180deg);
            }
          }
          span {
            display: flex;
            flex-direction: column;
            // justify-content: center;
            align-items: center;
            font-size: 12px;
            color: var(--font_gray);
          }
          .frequency {
            margin-top: 24px;
          }
          .qval {
            margin-top: 19px;
          }
          .gain {
            margin-top: 19px;
          }
          .fDecember {
            margin-top: 23px;
          }
          .zero {
            margin-top: 96px;
          }
          .zDecember {
            margin-top: 96px;
          }
        }
        .van-swipe__indicator--active {
          width: 12px;
          border-radius: 3px;
        }
      }
      .button {
        width: 180px;
        height: 40px;
        background: var(--btn_bg);
        border-radius: 20px;
        color: var(--color_blue);
        border: none;
        opacity: 0.9;
        margin-top: 12px;
        font-size: 16px;
      }
    }
  }
  .mengchen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--border);
  }
  .moveMain {
    position: absolute;
    width: 336px;
    height: 388px;
    //   background: red;
    background-color: var(--box_bg);
    opacity: 1;
    border-radius: 24px;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 16px;
    padding: 0 24px;
    .moveTitle {
      width: 288px;
      height: 56px;
      line-height: 56px;
      font-size: 20px;
      color: var(--font);
    }
    .moveMeddle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 288px;
      height: 66px;
      span {
        font-size: 16px;
        font-size: 16px;
        display: inline-block;
        color: var(--font);
      }
    }
    .moveMeddlepl {
      // display: flex;
      // justify-content: space-between;
      // align-items: center;
      // width: 288px;
      // height: 66px;
      .van-cell {
        width: 60%;
        padding: 0;
        font-size: 16px;
      }
      .topHz {
        width: 50px;
        display: flex;
        justify-content: end;
        align-items: center;
      }
      span {
        font-size: 16px;
        font-size: 16px;
        display: inline-block;
        color: var(--font);
      }
      .Hz {
        font-size: 12px;
        color: var(--font_gray);
      }
    }
    .valueSetVal {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 288px;
      height: 66px;
    }
    .moveFoot {
      width: 288px;
      height: 40px;
      // background-color: red;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 8px;
      .moveFootText {
        font-size: 16px;
        color: var(--color_blue);
      }
      .moveFootLine {
        width: 1px;
        height: 24px;
        background: var(--border);
      }
    }
  }
}
</style>